<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .login,
        .noLogin {
            display: none;
        }
    </style>
</head>

<body>



    <h1>首页</h1>

    <h2>
        <a href="./05_list.html">查看商品</a>
    </h2>

    <div class="login">
        欢迎 <span class="user">xx</span>
    </div>

    <div class="noLogin">
        <a href="./02_reg.html">注册</a>
        <a href="./03_login.html">登陆</a>
    </div>


    <div class="banner">
        <ul>
            <!-- <li>
                <img src="" alt="">
            </li> -->
        </ul>
        <ol></ol>
        <span></span>
        <span></span>
    </div>


    <script src="../js/tools.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>

    <script>

        const oDiv1 = $('.login');


        // 去cookie中找到用户是否登陆
        const user = getCookie('YYDS');
        console.log(user);
        if (user) {

            setCss(oDiv1, {
                display: 'block'
            });

            $('span').innerHTML = user;

        }
        else {
            setCss(oDiv2, {
                display: 'block'
            })
        }



        ajax({
            type: 'get',
            url: 'http://121.43.116.41/php/banner.php',
            success: res => {
                console.log(res);
                const arr = res.data;

                // 渲染图片和小点
                render(arr);
                // 轮播
                // 。。。。
            }
        })



        function render(arr) {
            let html = '';
            arr.forEach(item => {
                html += `
                <li>
                    <img src="${item.picSrc}" alt="">
                </li>
                `
            })
            $('ul').innerHTML = html;
        }





    </script>

</body>

</html>